<template>
  <view class="loading-spinner" :class="{ 'show': show }">
    <view class="spinner-content">
      <view class="spinner-icon" :class="type">
        <text class="iconfont icon-loading" v-if="type === 'icon'"></text>
        <view class="spinner-dots" v-else-if="type === 'dots'">
          <view class="dot" v-for="n in 3" :key="n"></view>
        </view>
        <view class="spinner-circle" v-else>
          <view class="circle"></view>
        </view>
      </view>
      <view class="spinner-text" v-if="text">{{ text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoadingSpinner',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'circle', // icon, dots, circle
    },
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $overlay-mask-color;
  @include flex-center;
  z-index: $z-index-overlay;
  opacity: 0;
  visibility: hidden;
  transition: opacity $transition-standard, visibility $transition-standard;
  
  &.show {
    opacity: 1;
    visibility: visible;
  }
}

.spinner-content {
  background: rgba(0,0,0,0.82);
  border-radius: 16rpx;
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: $shadow-lg;
}

.spinner-icon {
  margin-bottom: 24rpx;
  
  &.icon .iconfont {
    font-size: 64rpx;
    color: white;
    animation: rotate 1s linear infinite;
  }
}

.spinner-dots {
  display: flex;
  gap: 8rpx;
  
  .dot {
    width: 12rpx;
    height: 12rpx;
    background: white;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
    
    &:nth-child(1) { animation-delay: -0.32s; }
    &:nth-child(2) { animation-delay: -0.16s; }
  }
}

.spinner-circle {
  .circle {
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
  }
}

.spinner-text {
  color: white;
  font-size: 26rpx;
  text-align: center;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}
</style>